<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeTabkey">
      <a-tab-pane title="工单信息" key="1">
        <workorderdetails :workId="workId" />
      </a-tab-pane>
      <a-tab-pane title="工单产生的运营成本" key="2">
        <operatePage :workCode="workCode" />
      </a-tab-pane>
      <a-tab-pane title="关联订单信息" key="3">
        <associationorderdetails :orderId="orderId" :workId="workId" :orderType="orderType" :workCode="workCode" :status="status" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="WorkOrderDetail">
  import workorderdetails from './components/work-order-details.vue'
  import associationorderdetails from './components/association-order-details.vue'
  import operatePage from './components/operate.vue'
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const routeQuery = route.query
  const activeTabkey = ref('1')

  const workId = +route.params.id
  const orderId = ref(null)
  const orderType = ref(null)
  const workCode = ref(null)
  const status = ref(null)

  console.log('routeQuery', routeQuery)
  if (routeQuery.tab) {
    activeTabkey.value = routeQuery.tab
    orderId.value = routeQuery.orderId
    orderType.value = Number(routeQuery.orderType)
    workCode.value = routeQuery.workCode
    status.value = routeQuery.status
  }

  // 默认选中某个 tab
  watch(
    () => routeQuery.tab,
    (newVal) => {
      if (newVal) activeTabkey.value = routeQuery.tab
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped></style>
